<template>
  <z-modal
    :width="1050"
    v-bind="modalOption"
    :okText="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="客户名称" prop="customerName">
              <a-input v-model.trim="form.customerName" placeholder="请输入客户名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户类型" prop="customerType">
              <z-dict-select-tag v-model="form.customerType"  dictCode="customer_type" placeholder="请选择客户类型"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="下次联系时间" prop="nextTime">
              <a-date-picker v-model="form.nextTime" style="width: 100%"  format="YYYY-MM-DD" @change="(value,dateString) =>{ this.form.dealDate = dateString}"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="成交状态" prop="dealStatus">
              <z-dict-select-tag v-model="form.dealStatus"  dictCode="deal_status" placeholder="请选择成交状态"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="行业类型" prop="industryType">
              <z-dict-select-tag v-model="form.industryType"  dictCode="industry_type" placeholder="请选择行业类型"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="业务类型" prop="businessType">
              <z-dict-select-tag v-model="form.businessType"  dictCode="business_type" placeholder="请选择业务类型"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户联系方式" prop="contactsInfo">
              <a-input v-model.trim="form.contactsInfo" placeholder="请输入客户联系方式"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="注册地址" prop="address">
              <a-cascader v-model="areaValues" :fieldNames="{ label: 'name', value: 'name', children: 'children' }" :options="areaData" placeholder="请选择注册地址" @change="onChange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户归属人" prop="belongTo">
              <a-input v-model.trim="form.belongTo" placeholder="请输入客户归属人"></a-input>
            </a-form-model-item>
          </a-col> 
          <a-col :span="12">
            <a-form-model-item label="归属人联系方式" prop="belongInfo">
              <a-input v-model.trim="form.belongInfo" placeholder="请输入归属人联系方式"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="纳税人识别号" prop="taxId">
              <a-input v-model.trim="form.taxId" placeholder="请输入纳税人识别号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属公司" prop="company">
              <a-input v-model.trim="form.company" placeholder="请输入所属公司"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="负责人" prop="ownerUserId">
              <ZSelectUserByDep :multi="false" v-model="form.ownerUserId" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="备注" prop="remark">
              <a-textarea v-model.trim="form.remark" placeholder="请输入备注"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        
        <!-- <a-form-model-item label="手机" prop="mobile">
          <a-input v-model.trim="form.mobile" placeholder="请输入手机"></a-input>
        </a-form-model-item>
        <a-form-model-item label="电话" prop="telephone">
          <a-input v-model.trim="form.telephone" placeholder="请输入电话"></a-input>
        </a-form-model-item>
        <a-form-model-item label="网址" prop="website">
          <a-input v-model.trim="form.website" placeholder="请输入网址"></a-input>
        </a-form-model-item> -->
        
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import {cascader as ACascader } from 'ant-design-vue'
import areaData from "./areadata"
export default {
  name: 'CrmCustomerModal',
  mixins: [ModalFormMixin],
  components: {
    ZDictSelectTag,
    ZSelectUserByDep,
    ACascader
  },
  data() {
    return {
      areaData,
      areaValues:[],
      validatorRules: {
          customerName: [
            { required: true, message: '请输入客户名称!'},
          ],
          dealStatus: [
            { required: true, message: '请输入成交状态!'},
          ],
          ownerUserId: [
            { required: true, message: '请选择负责人!'},
          ],
        },
      url: {
        add: "/customer/crmCustomer/add",
        edit: "/customer/crmCustomer/edit",
        queryById: "/customer/crmCustomer/queryById"
      }
    }
  },
  methods: {
    onChange(value) {
      var address = value.join(",")
      this.form.address = address
    },
    addAfter() {},
    editBefore(record){
      console.log('editBefore',record)
      let address = record.address
      if(address){
        this.areaValues = address.split(",")
      }
    }
  }
}
</script>
